<template>
  <div class="container">
    <el-table
      v-loading="loading"
      :data="
        registrationList.slice(
          (currentPage - 1) * pagesize,
          currentPage * pagesize
        )
      "
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="contact" label="联系人" align="center">
      </el-table-column>
      <el-table-column prop="examDescription" label="考试内容" align="center">
      </el-table-column>
      <el-table-column
        prop="number"
        label="总人数"
        sortable
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="last"
        label="剩余人数"
        sortable
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="term"
        label="学期"
        :formatter="termFormatter"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column label="状态" prop="stateUTF" align="center" width="150">
        <template slot-scope="scope">
          <template>
            <el-tag :type="scope.row.type">{{ scope.row.stateUTF }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="takeIn(scope.row)" size="small">报名</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      align="center"
      layout="total, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapActions } from 'vuex'
export default {
  inject: ['reload'],
  name: 'publicGetExam',
  data () {
    return {
      loading: false,
      // 报名表
      registrationList: [],
      // 考试信息表
      examList: [],
      // 初始页
      currentPage: 1,
      // 每页的数据
      pagesize: 10,
      // 数组总数
      pageTotal: 100000
    }
  },
  computed: {
    ...mapState({
      print: (state) => state.print.all,
      userId: (state) => state.userId.all
    })
  },
  mounted: function () {
    this.getRegistrationList()
  },
  methods: {
    getRegistrationList: function () {
      var that = this
      this.loading = true
      axios
        .all([
          // 报名表
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'get',
            url: '/api/examEntry/all?pageNum&pageSize'
          }),
          // 考试信息表
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'get',
            url: '/api/examDetail'
          })
        ])
        .then(
          axios.spread(function (regResponse, examResponse) {
            that.registrationList = regResponse.data.data
            that.pageTotal = regResponse.data.data.length
            that.examList = examResponse.data.data
            that.getListToge()
          })
        )
    },

    getListToge: function () {
      this.registrationList.forEach((item) => {
        for (var i = 0; i < this.examList.length; i++) {
          if (this.examList[i].examDetailId == item.examDetailId) {
            this.$set(
              item,
              'examDescription',
              this.examList[i].examDescription
            )
          }
        }

        if (item.state == 'START') {
          this.$set(item, 'stateUTF', '可报名')
          this.$set(item, 'type', 'success')
        } else if (item.state == 'FINISH') {
          this.$set(item, 'stateUTF', '报名结束')
          this.$set(item, 'type', 'danger')
        } else if (item.state == 'CANCEL') {
          this.$set(item, 'stateUTF', '报名取消')
          this.$set(item, 'type', 'info')
        } else if (item.state == 'PREPARE') {
          this.$set(item, 'stateUTF', '准备中')
          this.$set(item, 'type', 'primary')
        }

        // 获取报名考试剩余人数
        var that = this
        if (item.number == 0) {
          this.$set(item, 'last', 0)
        } else if (item.number <= 1000) {
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'get',
            url: '/api/userExamEntry/remain?examEntryId=' + item.examEntryId
          }).then(
            function (reponse) {
              that.$set(item, 'last', reponse.data.data)
            },
            function (err) {
              that.$set(item, 'last', '不可报名状态')
            }
          )
        } else {
          axios({
            headers: { Authorization: this.print.Authorization },
            method: 'get',
            url:
              '/api/userExamEntry/cache/remain?examEntryId=' + item.examEntryId
          }).then(
            function (reponse) {
              that.$set(item, 'last', reponse.data.data)
            },
            function (err) {
              that.$set(item, 'last', item.number)
            }
          )
        }
      })
      this.loading = false
    },

    // 表格数据转换
    termFormatter (row, column) {
      let term = row.term
      if (term.indexOf('SH') > 0) {
        return term.replace('SH', '上学期')
      } else {
        return term.replace('FH', '下学期')
      }
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },

    takeIn: function (row) {
      if (row.state == 'CANCEL') {
        this.$message({
          message: '考试报名已取消',
          type: 'warning'
        })
      } else if (row.state == 'PREPARE') {
        this.$message({
          message: '考试报名正在准备中',
          type: 'info'
        })
      } else if (row.state == 'FINISH') {
        this.$message({
          message: '考试报名已经结束',
          type: 'error'
        })
      } else if (row.state == 'START') {
        this.$message({
          message: '前往报名页面',
          type: 'success'
        })
        this.$router.push({
          name: 'takeinExam',
          params: {
            examEntryId: row.examEntryId,
            examDescription: row.examDescription,
            number: row.number,
            examDetailId: row.examDetailId
          }
        })
      }
    }
  }
}
</script>
